<div class="custom">
    <h1>
        商品管理
    </h1>

    <form class="row form-inline">
        <div class="form-group col-md-4">
            <label class="">一级类目</label>
            <select class="form-control" ng-model="f.name" ng-options="f.name for f in f_class">
                <option value="">-- 请选择商品分类 --</option>
            </select>
        </div>

        <div class="form-group col-md-4" ng-if="f.name">
            <label class="">二级类目</label>
            <select class="form-control" ng-model="queryData.categoryItem" ng-options="s.name for s in s_class">
                <option value="">-- 请选择商品二级分类 --</option>
            </select>
        </div>
        <div class="form-group col-md-4">
            <label class="">商品名称</label>
            <input type="text" ng-model="queryData.name_like" class="form-control ng-pristine ng-valid ng-touched">
        </div>
    </form>

    <div class="row" style="margin-top:10px;margin-bottom:10px;">
        <div class="form-group col-md-2">
            <button type="button" class="btn btn-warning btn-block" ng-click="exportAllGoods()">导出全部商品</button>
        </div>
        <div class="form-group col-md-2">
            <button type="button" class="btn btn-warning btn-block" ng-click="doQuery();">查询</button>
        </div>
        <div class="form-group col-md-2">
            <button type="reset" class="btn btn-default" ng-click="reset()">重置</button>
        </div>
    </div>

    <div class="panel panel-default">

        <div class="panel-heading clearfix">
            商品列表
            <div class="btn-group btn-group-sm pull-right" role="group" aria-label="...">
                <button type="button" class="btn btn-success" ng-click="showAddView();">新增</button>

            </div>
        </div>

        <table class="table table-bordered panel-body table-condensed ">
            <thead>
            <tr>
                <th width="5%">#</th>
                <th hidden>商品id</th>
                <th>图片</th>
                <th width="15%">商品名称</th>
                <th width="10%">二级类目id</th>
                <th width="10%">商品价格</th>
                <th width="5%">售价</th>
                <th width="10%">价格单位</th>
                <th width="10%">每单位重量及描述</th>
                <th width="15%">商品描述</th>
                <th width="5%">库存</th>
                <th width="20%">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="item in page.resultData">
                <td>
                    {{$index+1}}
                </td>
                <td hidden>{{item.commodityId}}</td>
                <td><img ng-src="{{item.imageUrl}}" alt="" width="50"></td>
                <td>{{item.name}}</td>
                <td>{{item.categoryId}}</td>
                <td>{{item.curPrice}}</td>
                <td>{{item.outPrice}}</td>
                <td>{{item.unit}}</td>
                <td>{{item.curUnitWeight}}</td>
                <td>{{item.descr}}</td>
                <td>{{item.stock}}</td>
                <td>
                    <a ng-click="updateCommodity(item.commodityId)" href="">修改</a>
                    <a ng-click="commodityDel(item.commodityId)" href="">删除</a>
                </td>
            </tr>
            </tbody>
        </table>

        <div class="panel-footer" style="text-align: center;">
            <uib-pagination style="margin:0;" ng-change="pageChanged(page.currentPage)" total-items="page.totalSize"
                            ng-model="page.currentPage"
                            items-per-page="page.pageSize" max-size="5" class="pagination-sm " boundary-links="true"
                            rotate="false"></uib-pagination>
        </div>

    </div>

</div>


<div class="slider_right slider_right_lg {{ data.isShowAddView ? 'active' : 'default' }} panel panel-default"
     style="background-color: white;">

    <div class="panel-heading clearfix">

        <button class="btn btn-xs" ng-click="pic='';data.isShowAddView = !data.isShowAddView">关闭</button>
    </div>

    <form name="myForm" class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-3 control-label">图片</label>
            <div class="col-sm-9">
                <input type="file" ngf-select="" ng-model="pic" name="file" ngf-accept="'image/*'" required="">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label"> <img ngf-src="pic" class="thumb" style="width: 160px;"></label>
            <div class="col-sm-9">
                <button ng-disabled="!myForm.$valid" ng-click="uploadPic(pic)">上传图片</button>
                <span class="progress" ng-show="picFile.progress >= 0">
                  <div style="width:{{picFile.progress}}%" ng-bind="picFile.progress + '%'" class="ng-binding"></div>
              </span>
            </div>
        </div>
    </form>
    <form class="form-horizontal" style="width:600px; margin-top: 20px;">
        <div class="form-group">
            <label class="col-sm-3 control-label">商品id</label>

            <div class="col-sm-9">
                <input type="text" class="form-control" ng-model="customer.commodityId" placeholder="商品id" readonly>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">商品名称</label>
            <div class="col-sm-9">
                <input type="text" class="form-control" ng-model="customer.name" placeholder="商品名称">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">商品描述</label>

            <div class="col-sm-9">
                <input type="text" class="form-control" ng-model="customer.descr" placeholder="商品描述">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">商品科目</label>

            <div class="col-sm-9">
                <input type="text" class="form-control" ng-model="customer.subject" placeholder="商品科目">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">商品分类</label>

            <div class="row">
                <div class="col-sm-4">
                    <select class="form-control" ng-model="f_add.name" ng-options="f_add.name for f_add in f_add_class" >
                        <option value="">-- 请选择商品分类 --</option>
                    </select>
                </div>
                <div class="col-sm-4" ng-if="f_add.name">
                    <select class="form-control" ng-model="s_add.name" ng-options="s_add.name for s_add in s_add_class">
                        <option value="">-- 请选择商品二级分类 --</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">商品价格</label>

            <div class="col-sm-9">
                <div class="input-group">
                    <input type="text" class="form-control" ng-model="customer.curPrice" placeholder="商品价格">
                    <span class="input-group-addon">元</span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">售价</label>

            <div class="col-sm-9">
                <div class="input-group">
                    <input type="text" class="form-control" ng-model="customer.outPrice" placeholder="售价">
                    <span class="input-group-addon">元</span>
                </div>

            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">价格单位</label>

            <div class="col-sm-9">
                <input type="text" class="form-control" ng-model="customer.unit" placeholder="价格单位">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label" style="letter-spacing: -1px">每单位重量及描述</label>

            <div class="col-sm-9">
                <input type="text" class="form-control" ng-model="customer.curUnitWeight" placeholder="每单位重量及描述">
            </div>

        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label" style="letter-spacing: -1px">库存</label>

            <div class="col-sm-9">
                <input type="text" class="form-control" ng-model="customer.stock" placeholder="0">
            </div>

        </div>
        <div class="form-group">
            <div class="col-sm-offset-3 col-sm-9">
                <button class="btn btn-default" ng-click="commodityDetail(customer)">提交</button>
            </div>
        </div>
</form>
    </div>